<!-- 详细评估结果 -->
<template>
    <div>
        <el-dialog title="详细评估结果" v-model="open" width="1400px" append-to-body :before-close="close" @close="close">
            <el-table :data="assessmentList" :border="true" stripe  height="700" style="width: 100%">
                <el-table-column label="设定地震序号" prop="sort" align="center" width="80" fixed />
                <el-table-column label="经度" align="center" prop="longitude" fixed />
                <el-table-column label="纬度" align="center" prop="latitude" fixed />
                <el-table-column label="宏观位置" align="center" prop="macroPosition" width="160" show-overflow-tooltip fixed />
                <el-table-column label="震级" align="center" prop="magnitude" fixed />
                <el-table-column label="角度" align="center" prop="angle" fixed />
                <el-table-column label="" align="center" prop="disasterArea" min-width="120">
                    <template #header>
                        <span>受灾区域面积</span><br>
                        <span>（平方公里）</span>
                    </template>
                </el-table-column>
                <el-table-column label="" align="center" prop="disasterNum" min-width="120">
                <template #header>
                    <span>灾区总人口</span><br>
                    <span>（万人）</span>
                </template>
                </el-table-column>
                <el-table-column label="" align="center" prop="disasterGdp" min-width="100">
                <template #header>
                    <span>灾区范围内GDP</span><br>
                    <span>（亿元）</span>
                </template>
                </el-table-column>
                <el-table-column label="死亡人数（人）" prop="deathToll" align="center" min-width="100" />
                <el-table-column label="受伤人数（人）" align="center" prop="injuredNum" min-width="100" />
                <el-table-column label="灾区经济损失（亿元）" align="center" prop="disasterLoss" min-width="100" />
                <el-table-column label="需紧急安置人数（人）" align="center" prop="resettledNum" min-width="100"  />
                <el-table-column label="需紧急救援力量（人）" align="center" prop="rescueForce" min-width="100" />
                <el-table-column label="其中专业救援力量（人）" align="center" prop="rescueForceZy" min-width="110" />
                <el-table-column label="其中民间救援力量（人）" align="center" prop="rescueForceMj" min-width="110" />
                <el-table-column label="其中社会其他救援力量（人）" align="center" prop="rescueForceQt" min-width="130" />
                <el-table-column label="需帐篷数（顶）" align="center" prop="tentNum" min-width="100" />
                <el-table-column label="需担架（付）" align="center" prop="stretcherNum" min-width="100" />
                <el-table-column label="需棉被（床）" align="center" prop="quiltsNum" min-width="100" />
                <el-table-column label="需食品（吨）" align="center" prop="foodsNum" min-width="100" />
                <el-table-column label="需饮水（吨）" align="center" prop="waterNum" min-width="100" />
                <el-table-column label="需临时厕所（个）" align="center" prop="bathroomNum" min-width="100" />
                <el-table-column label="需临时浴室（个）" align="center" prop="showersNum" min-width="100" />
                <el-table-column label="需医务人员（人）" align="center" prop="medicalMatters" min-width="100" />
                <el-table-column label="其中医生（人）" align="center" prop="medicalNum" min-width="100" />
                <el-table-column label="其中护士（人）" align="center" prop="nurseNum" min-width="100" />
                <el-table-column label="其中心里医生（人）" align="center" prop="psychologist" min-width="100" />
                <el-table-column label="需病房（平方米）" align="center" prop="sickroomNum" min-width="100" />
                <el-table-column label="需病床（张）" align="center" prop="sickbedNum" min-width="100" />
                <el-table-column label="需血浆（升）" align="center" prop="plasmaNum" min-width="100" />
            </el-table>
            <template #footer>
                <div class="dialog-footer">
                <el-button type="primary" @click="close">关闭</el-button>
                </div>
            </template>
        </el-dialog>
  </div>
</template>

<script setup>
import { getAllDetailsResult } from '@/api/earthquakeLossesEstimation/earthquakeSetting'
const route = useRoute()
const {taskId} = route.query
watch(
    () => props.open,() =>{
        if(props.open){
            getAssessmentList()
        }
    }
)
const assessmentData = reactive({
  assessmentList: []
})
const { assessmentList } = toRefs(assessmentData)
const getAssessmentList = () => {
    getAllDetailsResult(taskId).then(res => {
    if(res.code === 200){
      assessmentList.value = res.data
    }
  })
}
const props = defineProps({
    open: Boolean
})
const emits = defineEmits(['update:open'])

const close = () => {
  emits('update:open', false)
}

</script>
<style scoped lang="scss">
.el-table {
    margin-top: 20px;
}
</style>